<template>
  <a-modal :footer="false" title="字典类型" v-model:open="typeShowForm" get-container=".SystemDict">
    <a-form
      :rules="typeRules"
      :model="typeForm"
      @finish="submit"
      :wrapper-col="{ offset: 1 }"
      :label-col="{ span: 4, offset: 4 }"
      :disabled="hasPerm('system:dict:edit')"
    >
      <a-card title="编辑/新增" class="form__head">
        <template #extra>
          <a-button htmlType="submit" type="primary" :loading="loading" block>保存</a-button>
        </template>

        <a-form-item label="字典名称" name="dictName">
          <a-input placeholder="请输入字典名称" v-model:value="typeForm.dictName"></a-input>
        </a-form-item>
        <a-form-item label="字典类型" name="dictType">
          <a-input placeholder="请输入字典类型" v-model:value="typeForm.dictType"></a-input>
        </a-form-item>
        <a-form-item label="是否启用" name="status">
          <a-radio-group v-model:value="typeForm.status" :options="isOptions"></a-radio-group>
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea placeholder="请输入备注" v-model:value="typeForm.remark"></a-textarea>
        </a-form-item>
      </a-card>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { createType, updateType } from '@/api/modules/system/dict/dict';
import { isOptions } from '@/global/options/system';
import { hasPerm } from '@/utils/common/perm';
import { response } from '@/utils/table/table';
import { typeList } from '../../data/curd';
import { typeForm, typeRules, typeShowForm } from '../../data/form';

const loading = ref(false);

const submit = async () => {
  loading.value = true;
  try {
    if (typeForm.value.dictId) {
      await response(updateType, typeForm.value);
    } else {
      await response(createType, typeForm.value);
    }
    await typeList();
    loading.value = false;
    typeShowForm.value = false;
  } catch (error) {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped></style>
